import React from 'react';
import ReactNative, {
  View,
  Image,
  Text,
  ListView,
  TextInput,
  Button,
  TouchableOpacity,
  Keyboard,
  ScrollView,
  Alert,
} from 'react-native';

import BasePage from '../common/BasePage';
import SizeUtils from '../../common/SizeUtils';
import Config from '../../config';
import ToastUtils from '../../common/ToastUtils';
import dismissKeyboard from 'dismissKeyboard';
import CommonShowViewFullScreenAction from '../../actions/common/CommonShowViewFullScreenAction';
import CreateSuggestAction from '../../actions/vipsercard/CreateSuggestAction';


export default class VipSuggest extends BasePage {
  constructor(props) {
    super(props);
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2, r3, r4) => r1 !== r2 !== r3 !== r4});
    this.state = {
      name: "",
      cardno: "",
      business_type: "",
      business_contact_way: "",
      business_contact_person: "",
      business_address: "",
      viewStatus: 1,
      keyboardHeight:0,
      contentheight: 0,
      
      dataSource: ds.cloneWithRows([
        {bbWidth:SizeUtils.translateDesignNumToCode(3), title:"姓名",
          key: 'name'
          },
        {bbWidth:SizeUtils.translateDesignNumToCode(3), title:"卡号",
          key: 'cardno'
          },
        {bbWidth:SizeUtils.translateDesignNumToCode(3), title:"商家类型",
          key: 'business_type'
          },
        {bbWidth:SizeUtils.translateDesignNumToCode(3), title:"推荐商家地址",
          key: 'business_address'
          },
        {bbWidth:SizeUtils.translateDesignNumToCode(3), title:"商家联系人&联系方式",
          key: 'business_contact_person'
          },
        {bbWidth:SizeUtils.translateDesignNumToCode(3), title:"推荐理由",
          key: 'business_contact_way'
          },
      ]),};

    this._sendRequest = false;
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide.bind(this));
  }


  componentWillUnmount() {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  }

  componentWillUpdate(nextProps, nextStates) {
    if(nextStates.viewStatus == 3 && this._sendRequest) {
      new CommonShowViewFullScreenAction().call(this, null);
      this._resetState();
      this._sendRequest = false;
      Alert.alert('提示','发表成功',[
          {text:'确定',onPress:()=>{this.goBack()}}
        ])
    }
    else if(nextStates.viewStatus == 4 && this._sendRequest) {
      this._sendRequest = false;
      nextStates.viewStatus = 1;
      Alert.alert('提示','发表失败',[
          {text:'确定'}
        ])
    }
    return true;
  }

  _resetState() {
    this.setState({
      name: "",
      cardno: "",
      business_type: "",
      business_contact_way: "",
      business_contact_person: "",
      business_address: "",
    })
  }

  _keyboardDidShow(e){
    if(e.startCoordinates){
         this.setState({
          keyboardHeight:e.startCoordinates.height,
      }, ()=> {
        // this._scrollToEnd();
      })
    }else if(e.endCoordinates){
        this.setState({
          keyboardHeight:e.endCoordinates.height,
      }, ()=> {
        // this._scrollToEnd();
      })
    }

  }

  _keyboardDidHide(e){
      this.setState({
          keyboardHeight:0
      }, ()=> {
        setTimeout(()=>{
          this._scrollView.scrollTo({y: 0});
        },500);
      })
  }

  _scrollViewTo(scrollLength){
    this._scrollView.scrollTo(SizeUtils.translateDesignHeightToCode(scrollLength));
　}

  _listItemRender(rowData){
    return(
        <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',
            borderColor:"#eeeeee", paddingTop:SizeUtils.translateDesignWidthToCode(44),
            paddingBottom:SizeUtils.translateDesignWidthToCode(44),
            paddingLeft:SizeUtils.translateDesignWidthToCode(44),
            borderBottomWidth:rowData.bbWidth,width:SizeUtils.getWindowSize().width,
            }}>
            <View style={{ flexWrap: 'nowrap', }}>
              <Text style={{color: '#666666',fontSize:SizeUtils.translateFontSizeToCode(32),}}>{rowData.title}：</Text>
            </View>
            <View style={{
              flex:2,
              paddingRight:SizeUtils.translateDesignWidthToCode(44),
            }}>
              <TextInput
                  style={{borderWidth:0,padding:0,height: SizeUtils.translateDesignHeightToCode(32)}}
                  onChangeText = {(name) => this.setState({name})}
                />
                  {/*onFocus = {this._scrollViewTo.bind(this)}*/}

            </View>
        </View>
    )
  }

  _itemName(){
    return(
      <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',
            borderColor:"#eeeeee", paddingTop:SizeUtils.translateDesignWidthToCode(44),
            paddingBottom:SizeUtils.translateDesignWidthToCode(44),
            paddingLeft:SizeUtils.translateDesignWidthToCode(44),
            borderBottomWidth:SizeUtils.translateDesignNumToCode(3),width:SizeUtils.getWindowSize().width,
            }}>
            <View style={{ flexWrap: 'nowrap', }}>
              <Text style={{color: '#666666',fontSize:SizeUtils.translateFontSizeToCode(32),}}>姓名：</Text>
            </View>
            <View style={{
              flex:2,
              paddingRight:SizeUtils.translateDesignWidthToCode(44),
              justifyContent: 'center',
            }}>
              <TextInput
                  style={{borderWidth:0,padding:0,height: SizeUtils.translateDesignHeightToCode(45)}}
                  onChangeText = {(name) => this.setState({name})}
                  underlineColorAndroid="transparent"
                  value = {this.state.name}
                  onFocus = {this._scrollViewTo.bind(this, 0)}
                />
            </View>
        </View>
    )
  }

  _itemCardNo(){
    return(
      <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',
            borderColor:"#eeeeee", paddingTop:SizeUtils.translateDesignWidthToCode(44),
            paddingBottom:SizeUtils.translateDesignWidthToCode(44),
            paddingLeft:SizeUtils.translateDesignWidthToCode(44),
            borderBottomWidth:SizeUtils.translateDesignNumToCode(3),width:SizeUtils.getWindowSize().width,
            }}>
            <View style={{ flexWrap: 'nowrap', }}>
              <Text style={{color: '#666666',fontSize:SizeUtils.translateFontSizeToCode(32),}}>卡号：</Text>
            </View>
            <View style={{
              flex:2,
              paddingRight:SizeUtils.translateDesignWidthToCode(44),
            }}>
              <TextInput
                  style={{borderWidth:0,padding:0,height: SizeUtils.translateDesignHeightToCode(45),fontSize: SizeUtils.translateFontSizeToCode(32)}}
                  onChangeText = {(cardno) => this.setState({cardno})}
                  underlineColorAndroid="transparent"
                  value = {this.state.cardno}
                  onFocus = {this._scrollViewTo.bind(this, 116)}
                />
            </View>
        </View>
    )
  }

  _itemBusinessType(){
    return(
      <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',
            borderColor:"#eeeeee", paddingTop:SizeUtils.translateDesignWidthToCode(44),
            paddingBottom:SizeUtils.translateDesignWidthToCode(44),
            paddingLeft:SizeUtils.translateDesignWidthToCode(44),
            borderBottomWidth:SizeUtils.translateDesignNumToCode(3),width:SizeUtils.getWindowSize().width,
            }}>
            <View style={{ flexWrap: 'nowrap', }}>
              <Text style={{color: '#666666',fontSize:SizeUtils.translateFontSizeToCode(32),}}>商家类型：</Text>
            </View>
            <View style={{
              flex:2,
              paddingRight:SizeUtils.translateDesignWidthToCode(44),
            }}>
              <TextInput
                  style={{borderWidth:0,padding:0,height: SizeUtils.translateDesignHeightToCode(45),fontSize: SizeUtils.translateFontSizeToCode(32)}}
                  onChangeText = {(business_type) => this.setState({business_type})}
                  underlineColorAndroid="transparent"
                  value = {this.state.business_type}
                  onFocus = {this._scrollViewTo.bind(this, 116*2)}
                />
            </View>
        </View>
    )
  }

  _itemBusinessAddress(){
    return(
      <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',
            borderColor:"#eeeeee", paddingTop:SizeUtils.translateDesignWidthToCode(44),
            paddingBottom:SizeUtils.translateDesignWidthToCode(44),
            paddingLeft:SizeUtils.translateDesignWidthToCode(44),
            borderBottomWidth:SizeUtils.translateDesignNumToCode(3),width:SizeUtils.getWindowSize().width,
            }}>
            <View style={{ flexWrap: 'nowrap', }}>
              <Text style={{color: '#666666',fontSize:SizeUtils.translateFontSizeToCode(32),}}>推荐商家地址：</Text>
            </View>
            <View style={{
              flex:2,
              paddingRight:SizeUtils.translateDesignWidthToCode(44),
            }}>
              <TextInput
                  style={{borderWidth:0,padding:0,height: SizeUtils.translateDesignHeightToCode(45),fontSize: SizeUtils.translateFontSizeToCode(32)}}
                  onChangeText = {(business_address) => this.setState({business_address})}
                  underlineColorAndroid="transparent"
                  value = {this.state.business_address}
                  onFocus = {this._scrollViewTo.bind(this, 116*3)}
                />
            </View>
        </View>
    )
  }

  _itemBusinessContactPerson(){
    return(
      <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',
            borderColor:"#eeeeee", paddingTop:SizeUtils.translateDesignWidthToCode(44),
            paddingBottom:SizeUtils.translateDesignWidthToCode(44),
            paddingLeft:SizeUtils.translateDesignWidthToCode(44),
            borderBottomWidth:SizeUtils.translateDesignNumToCode(3),width:SizeUtils.getWindowSize().width,
            }}>
            <View style={{ flexWrap: 'nowrap', }}>
              <Text style={{color: '#666666',fontSize:SizeUtils.translateFontSizeToCode(32),}}>商家联系人&联系方式：</Text>
            </View>
            <View style={{
              flex:2,
              paddingRight:SizeUtils.translateDesignWidthToCode(44),
            }}>
              <TextInput
                  style={{borderWidth:0,padding:0,height: SizeUtils.translateDesignHeightToCode(45),fontSize: SizeUtils.translateFontSizeToCode(32)}}
                  onChangeText = {(business_contact_person) => this.setState({business_contact_person})}
                  underlineColorAndroid="transparent"
                  value = {this.state.business_contact_person}
                  onFocus = {this._scrollViewTo.bind(this, 116*4)}
                />
            </View>
        </View>
    )
  }

  _itemBusinessContactWay(){
    return(
      <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start',
            borderColor:"#eeeeee", paddingTop:SizeUtils.translateDesignWidthToCode(44),
            paddingBottom:SizeUtils.translateDesignWidthToCode(44),
            paddingLeft:SizeUtils.translateDesignWidthToCode(44),
            borderBottomWidth:SizeUtils.translateDesignNumToCode(3),width:SizeUtils.getWindowSize().width,
            }}>
            <View style={{ 
                flexWrap: 'nowrap', 
                height: SizeUtils.translateDesignHeightToCode(32), }}>
              <Text style={{color: '#666666',fontSize:SizeUtils.translateFontSizeToCode(32),}}>推荐理由：</Text>
            </View>
            <View style={{
              flex:2,
              paddingRight:SizeUtils.translateDesignWidthToCode(44),
            }}>
              <TextInput
                  style={{height: Math.max(SizeUtils.translateDesignHeightToCode(45), this.state.contentheight),
                  textAlignVertical: "top",
                  marginTop: SizeUtils.translateDesignHeightToCode(-10),                  
                  fontSize: SizeUtils.translateFontSizeToCode(32),borderWidth:0,padding:0}}
                  onChangeText = {(business_contact_way) => this.setState({business_contact_way})}
                  underlineColorAndroid="transparent"
                  value = {this.state.business_contact_way}
                  multiline = {true}
                  onFocus = {this._scrollViewTo.bind(this, 116*5)}
                  onContentSizeChange={this._onContentSizeChange.bind(this)}
                />
            </View>
        </View>
    )
  }

  _onContentSizeChange(event) {
    this.setState({contentheight: event.nativeEvent.contentSize.height });
  }

  _onPressSubmit(){
    if(this.state.name === ""){
       ToastUtils.show("请输入姓名");
    }
    else if(this.state.cardno === ""){
       ToastUtils.show("请输入卡号");
    }
    else if(this.state.business_type === ""){
       ToastUtils.show("请输入商家类型");
    }
    else if(this.state.business_address === ""){
       ToastUtils.show("请输入推荐商家地址");
    }
    else if(this.state.business_contact_person === ""){
       ToastUtils.show("请输入商家联系人&联系方式");
    }
    else if(this.state.business_contact_way === ""){
       ToastUtils.show("请输入推荐理由");
    }
    else {
      this._callCreateSuggest()
    }
  }

  _callCreateSuggest() {
    new CreateSuggestAction().call(this, {
      name: this.state.name,
      cardno: this.state.cardno,
      business_type: this.state.business_type,
      business_contact_way:this.state.business_contact_way,
      business_contact_person:this.state.business_contact_person,
      business_address:this.state.business_address});
    this._sendRequest = true;
      //  ToastUtils.show("已提交");    
  }

  render() {
    return(
      <View style={{width:SizeUtils.getWindowSize().width, height:SizeUtils.getWindowSize().height,
         paddingTop:Config.paddingTop + SizeUtils.translateDesignHeightToCode(20), alignItems: 'center', backgroundColor:"#ffffff"}}>
         {this._renderNavigationBar()}
         <ScrollView style={{width:SizeUtils.getWindowSize().width,
         }} ref={(ref) => this._scrollView = ref}>
            <View style={{flexDirection: 'column',alignItems: "center", backgroundColor:"#ffffff",
            width:SizeUtils.getWindowSize().width,
            }}>
            {/*<ListView
              dataSource={this.state.dataSource}
              renderRow={this._listItemRender.bind(this)}
            />*/}
            {this._itemName()}
            {this._itemCardNo()}
            {this._itemBusinessType()}
            {this._itemBusinessAddress()}
            {this._itemBusinessContactPerson()}
            {this._itemBusinessContactWay()}
          </View>
         </ScrollView>
         <View
          style={{
            flex: 2,
            justifyContent:"flex-end",
            height:SizeUtils.translateDesignHeightToCode(80)
          }}
         >
           <TouchableOpacity
            style={{
              width:SizeUtils.getWindowSize().width,
              backgroundColor: '#D93338',
            height:SizeUtils.translateDesignHeightToCode(80)
            }}
            onPress={this._onPressSubmit.bind(this)}
           >
             <Text style={{
                textAlign: 'center',
                color: '#ffffff',
                 paddingTop:SizeUtils.translateDesignWidthToCode(18),
                fontSize:SizeUtils.translateFontSizeToCode(32),
              }}>提交合作意向</Text>
           </TouchableOpacity>
         </View>
      </View>
    )
  }
}
